<template>
  <view class="search-item" @click="handleClick">
    <view class="item-top">
      <u-image class="item-img" :src="item.bannerUrl+'&image_process=resize,w_170,h_188'" width="170rpx" height="188rpx" border-radius="8rpx"></u-image>
      <view class="item-info">
        <view class="item-title u-line-1">{{item.activityName}}</view>
        <view class="item-des" :class="type == 'index'? 'u-line-1': 'u-line-2'">{{item.activityIntroduce}}</view>
        <view class="item-tags">
          <template v-for="(tag, index) in item.activityTags">
            <text v-if="tag" class="tag" :key="index">{{tag}}</text>
          </template>
        </view>
        <view v-if="type == 'index'" class="free">免费</view>
        <view v-else-if="type == 'forever'" class="free">永久有效</view>
      </view>
    </view>
  </view>
</template>

<script>
import { reqAppAddBrowseRecord } from "@/api/modules/report";

export default {
  props: {
    type: {
      type: String,
      default: 'index',
    },
    item: {
      type: Object,
      default: function() { return {}}
    },
  },
  data() {
    return {
      personId: uni.getStorageSync("person-id").slice(2) || undefined,
    }
  },
  methods: {
    handleClick() {
      let params = {
        mpaActivityId: this.item.activityIdCode,
        activityName: this.item.activityName,
        activityDesc: this.item.activityIntroduce,
        browsePersonId: this.personId,
        moduleType: "OCCUPATION_MODULE_TYPE",
      }
      reqAppAddBrowseRecord(params, this.personId);
      this.$emit('click')
    }
  }
}
</script>

<style lang="scss" scoped>
.search-item {
  margin: 0 32rpx 24rpx 32rpx;
  padding: 24rpx;
  border-radius: 16rpx;
  background-color: #ffffff;

  .item {
    &-top {
      display: flex;
    }

    &-img {
      flex-shrink: 0;
      margin-right: 20rpx;
      width: 170rpx;
      height: 188rpx;
      border-radius: 8rpx;
    }

    &-info {
      flex: 1;
      width: 0;
    }

    &-title {
      margin-bottom: 16rpx;
      font-size: $uni-font-size-lg;
      font-weight: bold;
      color: #222222;
    }

    &-des {
      margin-bottom: 12rpx;
      font-size: $uni-font-size-nor;
      color: #979A9D;
    }

    &-tags {
      .tag {
        display: inline-block;
        margin-bottom: 10rpx;
        margin-right: 16rpx;
        padding: 0 12rpx;
        height: 38rpx;
        line-height: 38rpx;
        border-radius: 4rpx;
        font-size: $uni-font-size-min;
        color: #555555;
        background-color: #F5F5F5;
      }
    }
  }

  .free {
    font-size: $uni-font-size-sm;
    color: #538EFA;
  }

  .content {
    margin-bottom: 22rpx;
    font-size: $uni-font-size-sm;
    color: #BFBFBF;
  }
}
</style>